<!DOCTYPE html>
<html lang="">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="x5-fullscreen" content="true">
<meta name="full-screen" content="yes">
<meta name="theme-color" content="#317EFB" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=0" name="viewport">
<meta name="keywords" content="">
<meta property="og:type" content="article">
<meta property="og:title" content="css文字阴影">
<meta property="og:url" content="https://yysff.gitee.io/ye-blog/2020/11/05/%E6%96%87%E5%AD%97%E9%98%B4%E5%BD%B1/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-11-05T10:01:59.000Z">
<meta property="article:modified_time" content="2022-06-07T12:37:12.555Z">
<meta property="article:author" content="John Doe">
<meta property="article:tag" content="css">
<meta name="twitter:card" content="summary">

<title>
    css文字阴影
</title>




<link rel="preload" href="//at.alicdn.com/t/font_1518765_bkgx3wku6h4.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1518765_bkgx3wku6h4.css">


<link rel="stylesheet" href="/ye-blog/css/plugins/bootstrap.min.css">
<link rel="stylesheet" href="/ye-blog/css/plugins/locomotive-scroll.css">
<link rel="stylesheet" href="/ye-blog/css/plugins/swiper.min.css">
<link rel="stylesheet" href="/ye-blog/css/plugins/fancybox.min.css">
<link rel="stylesheet" href="/ye-blog/css/plugins/font-awesome.min.css">


<!-- variable -->
<script>window.TYPED_TEXT=[
  "Web Developer"
]</script>
<script>window.FAVICON={
  "icon16": null,
  "icon32": null,
  "appleTouchIcon": null,
  "webmanifest": null,
  "visibilitychange": false,
  "hidden": null,
  "showText": "(/≧▽≦/)咦！又好了！",
  "hideText": "(●—●)喔哟，崩溃啦！"
}</script>
<script>window.HTMEM_VERSION='1.0.2'</script>
<link data-theme-type="style-light" rel="stylesheet" href="/ye-blog/css/style-light.css?v=1.0.2" id="trm-switch-style">
<link data-theme-type="style-dark" rel="stylesheet" href="/ye-blog/css/style-dark.css?v=1.0.2" id="trm-switch-style">

<!-- theme css -->
<script>
    let themeMode = localStorage.getItem('theme-mode') === 'style-dark' ? 'style-light' : 'style-dark';
    let linkdom = document.querySelector('[data-theme-type='+themeMode+']');
    if(linkdom) linkdom.remove();
</script>

<!-- Site Analytics -->
 
<meta name="generator" content="Hexo 5.4.2"></head>

<body>

  <!-- app wrapper -->
  <div class="trm-app-frame">

    <!-- page preloader -->
    <div class="trm-preloader">
    <div class="trm-holder">
        <div class="preloader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
    <!-- page preloader end -->

    <!-- change mode preloader -->
    <div class="trm-mode-swich-animation-frame">
    <div class="trm-mode-swich-animation"><i class="far fa-sun"></i>
        <div class="trm-horizon"></div>
        <i class="far fa-moon"></i>
    </div>
</div>
    <!-- change mode preloader end -->

      <!-- scroll container -->
      <div id="trm-dynamic-content" class="trm-swup-animation">
        <div id="trm-scroll-container" class="trm-scroll-container" data-scroll-container style="opacity: 0">
          <div data-scroll-section id="content" class="trm-scroll-section">
            <!-- top bar -->
            <div class="trm-top-bar" data-scroll data-scroll-sticky data-scroll-target="#content" data-scroll-offset="-10">
	<div class="container">
		<div class="trm-left-side">
			<!-- logo -->
			<a href="/ye-blog/" class="trm-logo-frame trm-anima-link">
				<img src="/ye-blog/logo.png" alt="logo">
				<div class="trm-logo-text">
					Theme
					<span>Async</span>
				</div>
			</a>
			<!-- logo end -->
		</div>
		<div class="trm-right-side">

			<!-- menu -->
			<div class="trm-menu">
				<nav>
					<ul>
						
						<li class="menu-item-has-children ">
							<a  href="/ye-blog/">
								首页
							</a>
							
						</li>
						
						<li class="menu-item-has-children ">
							<a  href="/ye-blog/archives/">
								归档
							</a>
							
						</li>
						
						<li class="menu-item-has-children ">
							<a  href="/ye-blog/links/">
								友链
							</a>
							
						</li>
						
						<li class="menu-item-has-children ">
							<a  href="/ye-blog/about/">
								关于
							</a>
							
						</li>
						
					</ul>
				</nav>
			</div>
			<!-- menu end -->

			<!-- mode switcher place -->
			<div class="trm-mode-switcher-place"></div>
			<!-- mode switcher place end -->

		</div>
		<div class="trm-menu-btn">
			<span></span>
		</div>
	</div>
</div>
            <!-- top bar end -->

            <!-- body -->
            <div class="trm-content-start">

    <!-- banner -->
    <div class="trm-banner" data-scroll data-scroll-direction="vertical">
    <!-- banner cover -->
    <img src="https://pic1.zhimg.com/v2-b3c2c6745b9421a13a3c4706b19223b3_r.jpg?source=1940ef5c" alt="banner" class="trm-banner-cover" data-scroll data-scroll-direction="vertical" data-scroll-speed="-3">
    <!-- banner cover end -->

    <!-- banner slideshow cover-->
    <!-- <div class="swiper-container trm-slideshow" data-scroll data-scroll-direction="vertical" data-scroll-speed="-4">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="/img/blog/b1.jpg" alt="banner" class="trm-banner-cover" data-swiper-parallax-y="-200" data-swiper-parallax-scale="1.2"></div>
            <div class="swiper-slide"><img src="/img/blog/b2.jpg" alt="banner" class="trm-banner-cover" data-swiper-parallax-y="-200" data-swiper-parallax-scale="1.2"></div>
            <div class="swiper-slide"><img src="/img/blog/b3.jpg" alt="banner" class="trm-banner-cover" data-swiper-parallax-y="-200" data-swiper-parallax-scale="1.2"></div>
        </div>
    </div> -->
    <!-- banner slideshow cover end -->

    <!-- banner video cover -->
    <!-- <video autoplay="autoplay" loop muted playsinline webkit-playinginline class="trm-banner-cover" data-scroll data-scroll-direction="vertical" data-scroll-speed="-4">
        <source src="img/banner.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="img/banner.webm" type='video/webm; codecs="vp8, vorbis"'>
        <source src="img/banner.ogg" type='video/ogg; codecs="theora, vorbis"'>
        Your browser does not support HTML5 video.
    </video> -->
    <!-- banner video cover end -->

    <!-- banner cover end -->

    <!-- banner content -->
    <div class="trm-banner-content trm-overlay">
        <div class="container" data-scroll data-scroll-direction="vertical" data-scroll-speed="0">
            <div class="row">
                <div class="col-lg-4"></div>
                <div class="col-lg-8">

                    <!-- banner title -->
                    <div class="trm-banner-text">
                        <div class="trm-label trm-mb-20">
                            NEWS LETTER
                        </div>
                        <h1 class="trm-mb-30 trm-hsmb-font">
                            css文字阴影
                        </h1>

                        
                            <ul class="trm-breadcrumbs trm-label">
                                <li>
                                    <a href="/ye-blog/" class="trm-anima-link">Home</a>
                                </li>
                                <li>
                                    <span>
                                        2020
                                    </span
                                ></li>
                            </ul>
                        
                    </div>
                    <!-- banner title end -->

                    <!-- scroll hint -->
                    <a href="#about-triger" data-scroll-to="#about-triger" data-scroll-offset="-130" class="trm-scroll-hint-frame">
                        <div class="trm-scroll-hint"></div>
                        <span class="trm-label">Scroll down</span>
                    </a>
                    <!-- scroll hint end -->

                </div>
            </div>
        </div>
    </div>
    <!-- banner content end -->
</div>
    <!-- banner end -->

    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <!-- main card -->
                <div class="trm-main-card-frame trm-sidebar">
    <div class="trm-main-card" data-scroll data-scroll-repeat data-scroll-sticky data-scroll-target="#content" data-scroll-offset="60">
        <!-- card header -->
        <div class="trm-mc-header">
            <div class="trm-avatar-frame trm-mb-20"><img class="trm-avatar" src="博主头像信息" alt="Avatar"> </div>
            <h5 class="trm-name trm-mb-15">
                ThemeAsync
            </h5>
            <div class="trm-label">
                I`m
                <span class="trm-typed-text">
                    <!-- Words for theme.user.typedText -->
                </span>
            </div>
        </div>
        <!-- card header end -->
        <div class="trm-divider trm-mb-40 trm-mt-40"></div>
        <!-- sidebar social -->
        <div class="trm-social">
            
                <a href="https://github.com" rel="nofollow" target="_blank">
                    <i class="fab fa-github"></i>
                </a>
            
                <a href="https://gitee.com" rel="nofollow" target="_blank">
                    <i class="iconfont cg-gitee"></i>
                </a>
            
                <a href="https://weibo.com/" rel="nofollow" target="_blank">
                    <i class="iconfont cg-weibo"></i>
                </a>
            
        </div>
        <!-- sidebar social end -->
        <div class="trm-divider trm-mb-40 trm-mt-40"></div>
        <!-- info -->
        <ul class="trm-table trm-mb-20">
            
                <li>
                    <div class="trm-label">
                        Residence:
                    </div>
                    <div class="trm-label trm-label-light">
                        Mars
                    </div>
                </li>
            
                <li>
                    <div class="trm-label">
                        City:
                    </div>
                    <div class="trm-label trm-label-light">
                        WuHan
                    </div>
                </li>
            
                <li>
                    <div class="trm-label">
                        Age:
                    </div>
                    <div class="trm-label trm-label-light">
                        18
                    </div>
                </li>
            
        </ul>
        
    </div>
</div>
                <!-- main card end -->
            </div>
            <div class="col-lg-8">
                <!-- content -->
                <div class="trm-content" id="trm-content">
                    <div data-scroll data-scroll-repeat data-scroll-offset="500" id="about-triger"></div>
                    
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="trm-card trm-label trm-label-light text-center"><i class="far fa-calendar-alt trm-icon"></i><br>
                                11/05
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="trm-card trm-label trm-label-light text-center"><i class="far fa-clock trm-icon"></i><br>
                                06:01
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="trm-card trm-label trm-label-light text-center"><i class="far fa-user trm-icon"></i><br>
                                ThemeAsync
                            </div>
                        </div>
                    </div>

                    <article class="trm-card trm-publication">
                        <hr>
<span id="more"></span>


<h1 id="文字阴影"><a href="#文字阴影" class="headerlink" title="文字阴影"></a>文字阴影</h1><p>文本阴影<br><code>text-shadow</code></p>
<h1 id="文本换行"><a href="#文本换行" class="headerlink" title="文本换行"></a>文本换行</h1><p>原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。<br><code>white-space：pre</code></p>
<p>默认情况：强制所有文本在同一行内显示。<br><code>white-space：nowrap</code></p>
<ul>
<li><p>文本溢出隐藏<br><code>overflow:hidden</code></p>
</li>
<li><p>溢出省略号<br><code>text-overflow:ellipsis</code></p>
</li>
</ul>
<h1 id="文本装饰"><a href="#文本装饰" class="headerlink" title="文本装饰"></a>文本装饰</h1><p>取消文本所有默认样式<br><code>text-decration:none</code></p>
<p>文本描边<br>``</p>
<h1 id="渐变"><a href="#渐变" class="headerlink" title="渐变"></a>渐变</h1><h3 id="线性渐变"><a href="#线性渐变" class="headerlink" title="线性渐变"></a>线性渐变</h3><p>背景渐变方向<code>to top,to bottom,to right,to left</code><br><code>background-image:linear-gradient(to top right, pink,hotpink,red)</code></p>
<h3 id="径向渐变"><a href="#径向渐变" class="headerlink" title="径向渐变"></a>径向渐变</h3><p>基本使用：<br><code>background-image:radial-gradient(pink,hotpink,red)</code></p>
<h3 id="重复渐变"><a href="#重复渐变" class="headerlink" title="重复渐变"></a>重复渐变</h3><p><code>repeat-linear-gradient</code></p>
<h1 id="字体图标"><a href="#字体图标" class="headerlink" title="字体图标"></a>字体图标</h1><h3 id="web字体基本使用"><a href="#web字体基本使用" class="headerlink" title="web字体基本使用"></a>web字体基本使用</h3><h3 id="图标库"><a href="#图标库" class="headerlink" title="图标库"></a>图标库</h3><hr>
<h1 id="2D变换"><a href="#2D变换" class="headerlink" title="2D变换"></a>2D变换</h1><p>原点设置<br>原点属性<code>transform-origin</code><br>属性值：<code>top left</code></p>
<h3 id="2D位移"><a href="#2D位移" class="headerlink" title="2D位移"></a>2D位移</h3><p>1.给元素添加<strong>转换属性</strong><code>transform</code><br>2.添加平移值<code>translate()</code></p>
<ul>
<li>水平平移<code>translateX()</code></li>
<li>垂直平移<code>translastY()</code><h3 id="2D旋转"><a href="#2D旋转" class="headerlink" title="2D旋转"></a>2D旋转</h3></li>
</ul>
<p>1.给元素添加<strong>转换属性</strong><code>transform</code><br>2.旋转角度<code>rotate(45deg)</code>;</p>

                    </article>

                    <!-- blog -->
                    <div class="row">
                        <div class="col-lg-12">
                            <!-- title -->
                            <h5 class="trm-mb-40 trm-title-with-divider">
                                Other Articles
                                <span data-number="02"></span>
                            </h5>
                        </div>
                        
                            <div class="col-lg-6">
    <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
        <a href="/ye-blog/2020/11/09/%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB/" class="trm-cover-frame trm-anima-link">
            <img src="/ye-blog/img/block.jpg" alt="cover">
        </a>
        <div class="trm-card-descr">
            <div class="trm-label trm-category trm-mb-20">
                <a href=" #.">
                    unclassified
                </a>
            </div>
            <h5>
                <a href="/ye-blog/2020/11/09/%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB/" class="trm-anima-link">
                    css过渡动画
                </a>
            </h5>
            <div class="trm-divider trm-mb-20 trm-mt-20"></div>
            <ul class="trm-card-data trm-label">
                <li>
                    11/09
                </li>
                <li>
                    09:21
                </li>
                <li>
                    262
                </li>
            </ul>
        </div>
    </div>
</div>
                        
                        
                            <div class="col-lg-6">
    <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
        <a href="/ye-blog/2020/11/05/css%E7%9B%92%E5%AD%90%E9%98%B4%E5%BD%B1%E8%83%8C%E6%99%AF/" class="trm-cover-frame trm-anima-link">
            <img src="/ye-blog/img/block.jpg" alt="cover">
        </a>
        <div class="trm-card-descr">
            <div class="trm-label trm-category trm-mb-20">
                <a href=" #.">
                    unclassified
                </a>
            </div>
            <h5>
                <a href="/ye-blog/2020/11/05/css%E7%9B%92%E5%AD%90%E9%98%B4%E5%BD%B1%E8%83%8C%E6%99%AF/" class="trm-anima-link">
                    css盒子阴影背景
                </a>
            </h5>
            <div class="trm-divider trm-mb-20 trm-mt-20"></div>
            <ul class="trm-card-data trm-label">
                <li>
                    11/05
                </li>
                <li>
                    03:12
                </li>
                <li>
                    394
                </li>
            </ul>
        </div>
    </div>
</div>
                        
                    </div>
                    <!-- blog end -->

                    

                    <div class="trm-divider trm-mb-40"></div>

                    <!-- footer -->
                    <footer class="trm-scroll-animation" data-scroll data-scroll-offset="50">
    <div class="trm-label">
        ©  2022- 2022 ·
        <span class="trm-accent-color">
            ThemeAsync
        </span>
    </div>
    <div class="trm-label">
        The blog has been lovely to run:
        <span id="since" class="trm-accent-color"></span>
        day
    </div>
</footer>
<script>
    function show_date_time () {
        BirthDay = new Date("04/10/2022 17:00:00");
        today = new Date();
        timeold = (today.getTime() - BirthDay.getTime());
        msPerDay = 24 * 60 * 60 * 1000
        day = Math.floor(timeold / msPerDay)
        since.innerHTML = day
    }
    show_date_time()
</script>
                    <!-- footer end -->
                </div>
                <!-- content end -->
            </div>
        </div>
    </div>
</div>


    
  
  
            <!-- body end -->
          </div>
        </div>
      </div>
      <!-- scroll container end -->

      <!-- mode switcher -->
      <div class="trm-hidden-switcher">
        <div class="trm-mode-switcher"><i class="far fa-sun"></i>
          <input class="tgl tgl-light" id="trm-swich" type="checkbox">
          <label class="trm-swich" for="trm-swich"></label>
          <i class="far fa-moon"></i>
        </div>
      </div>
      <!-- mode switcher end -->

  </div>
  <!-- app wrapper end -->

  
<script src="/ye-blog/js/plugins/jquery.min.js"></script>
<script src="/ye-blog/js/plugins/swup.min.js"></script>
<script src="/ye-blog/js/plugins/locomotive-scroll.js"></script>
<script src="/ye-blog/js/plugins/typing.js"></script>
<script src="/ye-blog/js/plugins/fancybox.min.js"></script>
<script src="/ye-blog/js/plugins/swiper.min.js"></script>


<!-- 评论插件 -->


<!-- Service Worker -->


<script src="/ye-blog/js/main.js?v=1.0.2"></script>


</body>

</html>